<!doctype html>
<html class="no-js fixed-layout">
<head>
    <!-- 公共head Begin -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
    <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
    <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>萌宠之家-C2B2C社会化电商平台</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="statics/img/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
    <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
    <!--<![endif]-->

    <script src="statics/js/plugin/jquery.cookie.js"></script>

    <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
    <script src="statics/js/plugin/jquery.form.js"></script>

    <script src="statics/js/jquery.lSelect.js"></script>
    <script src="statics/js/plugin/jquery.metadata.js"></script>
    <script src="statics/js/product.js"></script>
    <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
    <!-- sidebar start -->
    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
    <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
    <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li><span class="am-icon-info-circle am-icon-fw"> </span>个人资料</li>
        <li class="am-active">收货地址</li>
      </ol>
      
      <a class="am-btn am-btn-primary am-btn-xs am-margin-left-sm" href="member_receiver_input.html">添加地址</a>
      
      <div class="am-panel am-panel-default am-text-xs am-margin-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table id="tblShipping" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
              <tr>
                <th>收货人</th>
			    <th>详细地址</th>
				<th>手机号码</th>
				<th>邮编</th>
				<th>默认</th>
				<th>操作</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
          <!-- 分页 -->
          <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
          <h3 id="noData" style="display: none;" class="am-kai am-text-center am-margin-xs">没有找到任何记录!</h3>
      </div>

    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>
<script type="text/javascript">

    let jsonUser;
    let token;

    // 收货地址列表
    let shippingList = new Array();

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }

        // 设置token
        $('#token').val(token);


        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');

        // 加载'收货地址'列表数据
        loadShippingList();

    });// $(function());

/**	加载'收货地址'列表数据 **/
function loadShippingList() {

    // 加载'收货地址列表'数据
    $.post('http://localhost:8080/shipping/list', {token:token}, function (result) {

        // 如果返回的是token失效，就重新登录
        if(result.code == 419) {

            Modal.confirm('当前会话token失效，请重新登录页面！', {
                closeViaDimmer: false,
                onConfirm: function() {
                    top.location.href = 'login.html';
                },
                onCancel: function() {
                    top.location.href = 'login.html';
                }
            });// Modal.confirm();

            return;
        }// if(result.code == 419);

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            Modal.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        shippingList = result.data;

        // 填充表格数据
        fillShippingList();

    });// $.post();

}// loadShippingList();

/** 填充表格数据 **/
function fillShippingList( ) {

    // 清空表格数据
    $('#tblShipping tbody').empty();
    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !shippingList || shippingList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < shippingList.length; i++ ) {

        let shipping = shippingList[i];

        let trId = '<tr id="listTr' + shipping.id + '">';

        // 收货人
        let tdName = '<td>' + shipping.name + '</td>';

        // 地址
        let tdAddress = '<td>' + shipping.address + '</td>';

        // 手机
        let tdPhone = '<td>' + shipping.phone + '</td>';

        // 邮编
        let tdZipCode = '<td>' + shipping.zipCode + '</td>';

        // 是否默认
        let tdIsDefault = '<td>&nbsp;</td>';

        // 判断收货地址是否默认
        if( shipping.hasDefault ) {
            tdIsDefault = '<td><i class="am-icon-check"></i></td>';
        }

        // 操作
        let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

        // 编辑按钮
        let btnEdit = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary app-table-button-padding" onclick="location.href=\'member_receiver_input.html?id=' + shipping.id +'\'">'
            + '<span class="am-icon-pencil"> 编辑</span></button>';

        // 删除按钮
        let btnDelete = '<button type="button" class="am-btn am-btn-default am-btn-xs app-table-button-padding" onclick="deleteOne(\'' + shipping.id + '\')">'
            + '<span class="am-icon-trash-o"> 删除</span></button>';

        // 默认按钮
        let btnHasDefault = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="toggleHasDefault(\'' + shipping.id + '\')">'
            + '<span class="am-icon-flag"> 默认</span></button>';

        // 操作封装
        tdOpt += btnEdit + btnDelete + btnHasDefault + '</div></td>';

        // 封装整条tr单元格
        trId += tdName + tdAddress + tdPhone + tdZipCode + tdIsDefault + tdOpt + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblShipping tbody').append(trId);

    }// for();

}// fillShippingList();

// 单行删除
function deleteOne( shippingId ) {
    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要删除吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/shipping/delete',
                dataType: "json",
                async: false,
                data: { token: token, shippingId: shippingId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    // 删除商品信息数据
                    $("#listTr" + shippingId).remove();
                    Modal.alert('删除成功！');

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// deleteOne( shippingId );

/**
 * 收货地址'设为默认'操作
 * @param productId 商品id
 */
function toggleHasDefault( shippingId ) {

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要设为默认吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/shipping/activeDefault',
                dataType: "json",
                async: false,
                data: { token: token, shippingId: shippingId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('设为默认成功！');

                    // 刷新收货地址列表
                    loadShippingList();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// toggleHasDefault( shippingId );

</script>
</html>
